<!--
 * @FilePath: /fxfzywpt/src/components/CustomMenuExt/index.vue
 * @Description: 
-->
<template>
    <div class="button-menu">
      <div class="toggle-button" @click="isOpen = !isOpen">
        <img class="toggle-img" src="@/assets/map/image/newImage/earthButton.png" alt="" />
        <div class="txt">{{title}}</div>
      </div>
      <transition name="slide-fade">
        <div v-if="isOpen" class="menu" ref="menu">
          <div class="menu-items">
            <div
              class="menu-item"
              v-for="(option, index) in options"
              :key="index"
              :class="{ active: index === activeMenuItem }"
              @click="handleOptionClick(option, index)"
            >
              {{ option }}
            </div>
          </div>
        </div>
      </transition>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, defineProps } from 'vue';
  
  const isOpen = ref(false);
  const activeMenuItem = ref(0);
  const emits = defineEmits(['onOptionClick']);
  const props = defineProps({
    title:{
        type:String,
        default:'菜单'
    },
    options: {
      type: Array,
      default: [],
    },
  });
  onMounted(() => {
    //   document.addEventListener('click', handleClickOutside);
  });
  
  const menu = ref(null);
  
  const handleClickOutside = (event) => {
    if (!menu.value.contains(event.target)) {
      isOpen.value = false;
    }
  };
  
  const handleOptionClick = (option, index) => {
    console.log(option, index);
    activeMenuItem.value = index;
    emits('onOptionClick', option, index);
  };
  </script>
  
  <style scoped lang="scss">
  .button-menu {
    position: relative;
    display: flex;
    flex-direction: row;
  }
  
  .toggle-button {
    /* background: url('@/assets/map/image/newImage/earthButton.png') center center no-repeat; */
    /* background-size: contain; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #46ffff;
    line-height: 16px;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.63);
  }
  .toggle-img {
    z-index: 0;
    width: 80px;
    height: 80px;
  }
  .txt {
    position: absolute;
    z-index: 1;
  }
  .menu {
    /* position: absolute;
    top: 100%;
    left: 0; */
    display: flex;
    flex-direction: row;
    border-radius: 4px;
    margin-left: 10px;
  }
  
  .menu-items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-items: center;
  }
  .menu-item {
    cursor: pointer;
    margin-right: 10px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #418dfd;
    padding: 5px 11px;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #418dfd;
    line-height: 16px;
  }
  .active {
    color: white; 
  }
  </style>
  